W tym przypadku, ponieważ skóra jest ćwiczebna, będzie miała następujące właściwości:
Tworzenie skórki rozpoczyna się od Pomysłu. Najlepiej jest najpierw narysować szkic skórki w edytorze graficznym, a później wykonać pliki niezbędne dla skórki.
Co może być pomysłem na prostą skórkę bez żadnych "wodotrysków"? Oczywiście, opublikowane jakiś czas temu systemy operacyjne "z uniwersalnym interfejsem"!
Podczas wykorzystania tego szkicu należy odpowiedzieć na takie pytania:
Łatwo można zobaczyć, że szkic wygląda na "niedopracowany". I tak jest. Jednak odpowiada on na podstawowe pytania i nic więcej nie należy od niego wymagać. W związku z tym, na tym etapie "szkic" jest zakończony: szczegóły będą dopracowywane później.
Informacje o skórce nie mają żadnych wymagań, oprócz maksymalnej długości - 45 znaków. Musisz tylko wpisać nazwę skórki, autora i (w razie potrzeby) całą resztę. W tym przypadku wygląda to tak:
SkinTitle=Sample SkinAuthor=Gilorn SkinVer=4.7.4 SkinWWW=http://www.light-alloy.ru/ SkinCmt=sample skin for education kinAudio=0
Unikaj odstępu po znaku "równości".
Trzy najważniejsze szczegóły, które składają się na wizytówkę:
Ponieważ nasza skórka stylizowana jest na interfejs kafelkowy, to wizytówka również będzie taka:
Począwszy od tego momentu będziesz musiał polegać w dużym stopniu na szkicu i wyobraźni. Przecież tworzenie rysunków dla skórki nie może być określane przez: odtwarzacz nie rozumie tylko rysunków.
Pierwsze pytanie, na które należy odpowiedzieć, to: ile należy utworzyć oddzielnych rysunków? Im więcej rysunków - tym bardziej modułowa konstrukcja i łatwiej będzie pracować nad skórą w przyszłości lub używać jej do tworzenia innych skórek. Jednocześnie, im więcej oddzielnych rysunków, tym więcej będzie na nich pustego miejsca i "cięższa" będzie skórka.
Po starannym rozważeniu rozmieszczenia zdecydowaliśmy się na utworzenie pojedynczych rysunków dla następujących elementów:
Z nim jest najprościej: w pliku będzie tylko jeden obrazek. Wszystko czego potrzebujemy - to przeniesienie logotypu ze szkicu. Można przy okazji jeszcze coś do niego dodać.
Jest ono złożone ponieważ zawiera kilka elementów. Ponieważ wielkość elementów jest standardowa, to można przemyśleć, jak wygodnie jej rozmieścić.
Albo wziąć z podstawowego obrazka ze skórki o podobnej konstrukcji:
Ponadto 10 znaków menu kontekstowego wyświetlanych jest jako jeden obiekt, więc nie należy zmieniać ich kolejności lub liczby rzędów.
Proszę zwrócić uwagę na tło: jest czerwono-różowe. Jego zadaniem jest - dawanie jednoznacznej i jasnej odpowiedzi na pytanie "to tło?", a także łatwe pokazywanie granicy oddzielnych rysunków w pliku. Zamiast czerwono-różowego koloru można wybrać inny - jest to kwestia osobistych preferencji.
Nawiasem mówiąc, takie modułowe podejście pozwala kopiować część pliku rozmieszczenia (interface.xml) ze starej skórki do в nowej.
Tutaj jest wszystko proste (skala 500 %)...
...jak 67 cegiełek. Niestety wiele niestandardowych kolorów nie sprzyja prostemu zrozumieniu przypisania każdego piksela. A jeśli w przyszłości będzie wymagana korekta, to stracimy dużo czasu na określenie, jaki piksel należy zmienić. Dlatego taki wariant ma sens tylko w jednym przypadku: podczas używania specjalnego edytora skórek.
Najrozsądniejszym rozwiązaniem jest stosowanie dla każdego koloru koloru nie pojedynczego piksela, a piksela z ilustracją. Oczywiście, utworzenie takiego systemu zajmie nie jedną godzinę, ale w efekcie otrzymamy o wiele bardziej wygodny i intuicyjny mechanizm wyboru kolorów. Na przykład, jak ten poniżej (skala 200 %):
Tutaj każdy kolor reprezentowany jest warstwą-wypełnieniem "kolor" z graficzną maską (narzędzia Photoshop). Wszystkie kolory są wygodnie pogrupowane w foldery. W wyniku tego, na etapie wstępnego wyboru kolorów widać, jak on będzie wyglądał. Oprócz tego, każda warstwa ma swoją nazwę, więc można pożądaną warstwę szybko odszukać. Aby tutaj zmienić kolor wystarczy dwukrotnie kliknąć na odpowiedniej warstwie.
W głównym pliku rysunku znajdzie się wszystko to, co nie pojawiło się w trzech poprzednich, a mianowicie:
Ponieważ dalszego rozwoju skórki nie będzie, wszystko można ładnie wykonać:
Na pierwszy rzut oka wszystko jest kompaktowe, ale nawet w tej skórce jest dużo wolnego miejsca. Po prostu jest ono szare, a nie czerwone.
Przyjrzyj się dokładnie szarej strefie na samym dole. Cyfry i elementy głośności oraz osi czasu znajdują się w takim porządku, w jakim będą one położone na skórce. Ponadto, stałe graficzne każdego elementu położone w odniesieniu do drugich, przynależą do tej kontrolki w porządku wizualnym. To wszystko umożliwi w przyszłości zrozumieć co oznacza każdy z tych elementów. A rozmieszczenie pomoże w następnym etapie określić granice każdej stałej graficznej.
Oprócz tego można zmienić rysunek przedstawiający jeszcze niewypełnioną głośność (szary kwadrat u dołu po lewej), niedorysowany z prawej na 1 piksel. Jest to potrzebne do wizualnego ukrycia "niedojeżdżania" suwaka na ten sam 1 piksel. Jak wiadomo, suwak jeździ z wyliczeniem, że jest w nim 10 pikseli (a nie 9, jak w tej skórce).
Przyjrzyjmy się graficznym czcionkom. Zaczynają się one od znaku "<". Symbol ten rysujemy przed pozycją, jeśli użytkownik włącza odwrotne odliczanie czasu. Jeśli użyjemy tego znaku jako minus, to otrzymamy dużo bardziej zrozumiałe wyrażenie (jak np. w skórkach Alter Ego, Dub, PK-69 oraz większości innych).
Następne na co trzeba zwrócić uwagę, to animacja przycisków z funkcjami. Reakcja odtwarzacza zachodzi nie na wciśnięcie przycisku, a na jego późniejsze uwolnienie. Prowadzi to do następujących efektów:
Dlatego konieczne jest używanie zmiany obrazu przycisku nie z dolnego lewego rysunku, ale z prawego górnego. Jest to ostatnio dodane zalecenie, dlatego jest pewna ilość skórek, które go nie wypełniają (po prostu ukazały się one przed wydaniem zalecenia).
Jest to najważniejsza część pracy podczas tworzenia skórek, którą dobrze by było sprawdzić na żywo (tj. wypróbowanie niedokończonej skórki w odtwarzaczu). Na początku, należy utworzyć pusty plik i umieścić fragmenty kodu w dogodny sposób (nie zapomnij o kodowaniu UTF-8 with signature):
<?xml version="1.0"?> <SKIN> <!-- Logotyp --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Logotyp --> </IMAGE> <!-- Nagłówek okna --> <IMAGE id="HD" file="main.bmp"> </IMAGE> <!-- Panel sterowania --> <IMAGE id="FT" file="main.bmp"> </IMAGE> <!-- Lista odtwarzania --> <IMAGE id="PL" file="main.bmp"> </IMAGE> <!-- Zestawy kolorów --> <IMAGE id="Color" file="Color.bmp"> </IMAGE> <!-- Menu kontekstowe --> <IMAGE id="Menu" file="Rclick.bmp"> </IMAGE> <!-- Ikony myszki w podpowiedziach --> <IMAGE id="Hint" file="main.bmp"> </IMAGE> <!-- Rozpoznawanie numerów wg różnych kolorów u dołu bloku --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" --> <!-- //Koniec oznaczania głównych rysunków na fragmenty // =================== --> <!-- Początek opisu zastosowania utworzonych wcześniej fragmentów rysunku ======== --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Opisanie obramowania programu --> <!-- Dysponowanie przycisków nagłówka okna --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Tło nagłówka --> </CTLDEF> <!-- Dysponowanie przycisków Panelu sterowania --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Tło panelu sterowania --> </CTLDEF> <!-- Dysponowanie przycisków Listy odtwarzania --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- Tło przycisków --> </CTLDEF> </SKIN>
Zielony tekst - to komentarze. Pomagają one orientować się w tekście, ale są ignorowane przez program.
Każda stała posiada unikalną nazwę, położenie i rozmiar. Nazwę można wziąć z katalogu, ale położenie i rozmiar należy określić samodzielnie. Odbywa się to za pomocą edytora graficznego.
Większość edytorów graficznych wyświetla współrzędne kursora i posiada narzędzie "zaznaczanie obszaru prostokątnego" ze wskazaniem wielkości wybranego obszaru.
Do tego celu idealnie nadaje się PhotoFiltre (bezpłatny do użytku niekomercyjnego, strona oficjalna, wersja portable). Pozwala on, bezpośrednio po zaznaczeniu obszaru, poznać jego położenie i rozmiar. Przy czym rozmiar wydzielonego obszaru można na bieżąco skorygować myszką:
Zatem określenie wszystkich wartości występuje w czterech fazach:
W efekcie 15 minut wysiłku pierwsza część pliku znaczników przyjmuje następującą postać:
<!-- Logotyp --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Logotyp --> </IMAGE> <!-- Nagłówek okna --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Obramowanie okna --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Tło nagłówka--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Tło pod tekstem--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [o programie] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [zamknij] --> </IMAGE> <!-- Panel sterowania --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Tło podstawowego panelu sterowania --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Odtwarzaj/Wstrzymaj] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Ustawienia] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Zestaw liczb "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Oś czasu już zapełniona --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- Suwak na osi, wyrównanie do dołu --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Oś czasu jeszcze pusta --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- główne wykończenia na skali--> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- pośrednie wykończenia na skali--> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Regulator dźwięku już zapełniony --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Suwak regulator dźwięku--> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Regulator dźwięku jeszcze pusty --> </IMAGE> <!-- Lista odtwarzania --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- tło przycisków --> </IMAGE> <!-- Zestawy kolorów --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!--określenie koloru tekstu w nagłówku --> <AREA id="OSD" pos="141,18" size="1,5"/> <!--określenie koloru OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!--określenie koloru automatycznego przewijania --> <AREA id="Hint" pos="71,119" size="1,3"/> <!--określenie koloru podpowiedzi --> <AREA id="PL" pos="1,18" size="1,12"/> <!--określenie koloru listy odtwarzania --> <AREA id="Menu" pos="71,18" size="1,7"/> <!--określenie koloru menu kontekstowego --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!--określenie koloru pełnoekranowego wczytywania plików --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!--określenie koloru pełnoekranowego wczytywania napisów --> </IMAGE> <!-- Menu kontekstowe --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- rysunek dla kolumny ikon w menu kontekstowym --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- ikony dla elementów menu kontekstowego --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- znacznik zaznaczonego punktu w menu --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- zakładka w liście odtwarzania --> </IMAGE> <!-- Ikony myszki w podpowiedziach --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Rysunek LPM --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Rysunek PPM --> </IMAGE>
Ogólnie rzecz biorąc, istnieje tutaj tylko jedna pułapka: nie wszyscy wiedzą, co to takiego "<" i ">" i czym one się różnią. Dlatego lepiej jest podać w komentarzu jego przeznaczenie w bardziej zrozumiałym języku:
<!-- Rozpoznanie cyfr naprzemiennie w różnych kolorach w dolnej części bloku --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" -->
Jest to finalny etap tworzenia skórki i pożądana jest jego wizualna kontrola.
Istnieje kilka informacji dodatkowych, które należy wykonać:
Informacje dodatkowe mogą wyglądać na złożone, jeśli jednak zobaczymy to na żywej skórce, stanie się to zrozumiałe.
Od czego zależy pozycja i rozmiar kontrolek? Rozmiar - tylko od tego, jaki obrazek został narysowany (z wyjątkiem paneli i suwaków głośności i osi czasu - one są rozciągane). Pozycja nie zależy od niczego innego, oprócz zamysłu autora skórki.
<CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Opisanie obramowania programu --> <!-- Rozmieszczenie przycisków nagłówka okna --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Tło nagłówka --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [o programie] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [zamknij] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Linia tekstowa nagłówka --> </CTLDEF> <!-- Rozmieszczenie przycisków Panelu sterowania --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Tło Panelu sterowania --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Odtwarzaj/Wstrzymaj] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Ustawienia] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} > {DUR}"/> <!-- Pozycja/Czas trwania --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Aktualny czas --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Regulator głośności --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Oś czasu --> </CTLDEF> <!-- Rozmieszczenie przycisków Listy odtwarzania --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- tło przycisków --> </CTLDEF>
Kiedy wszystkie elementy mają już swoje położenie i rozmiar, należy przeglądnąć skórkę pod względem ewentualnie występujących problemów; nieestetycznych luk i niedoróbek. W przypadku ich wystąpienia, należy poprawić pozycję kontrolek.
W końcu plik rozmieszczenia przybiera swój ostateczny wygląd:
<?xml version="1.0"?> <SKIN> <!-- Logotyp --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Logotyp --> </IMAGE> <!-- Nagłówek okna --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Obramowanie okna --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Tło nagłówka--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Tło pod tekstem--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [o programie] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [zamknij] --> </IMAGE> <!-- Panel sterowania --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Tło podstawowego Panelu sterowania --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Odtwarzaj/Wstrzymaj] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Ustawienia] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Zestaw cyfr "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Oś czasu już zapełniona --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- Suwak na osi, wyrównany do dołu --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Oś czasu jeszcze pusta --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- główne oznaczenia na osi --> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- pośrednie oznaczenia na osi --> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Regulator dźwięku już zapełniony --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Suwak regulatora dźwięku --> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Regulator dźwięku jeszcze pusty --> </IMAGE> <!-- Lista odtwarzania --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- tło przycisków --> </IMAGE> <!-- Zestawy kolorów --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!-- określenie koloru tekstu w nagłówku --> <AREA id="OSD" pos="141,18" size="1,5"/> <!-- określenie koloru OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!-- określenie koloru automatycznego przewijania --> <AREA id="Hint" pos="71,119" size="1,3"/> <!-- określenie koloru podpowiedzi --> <AREA id="PL" pos="1,18" size="1,12"/> <!-- określenie koloru listy odtwarzania --> <AREA id="Menu" pos="71,18" size="1,7"/> <!-- określenie koloru menu kontekstowego --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!-- określenie koloru pełnoekranowego wczytywania plików --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!-- określenie koloru pełnoekranowego wczytywania napisów --> </IMAGE> <!-- Menu kontekstowe --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- rysunek kolumny ikon w menu kontekstowym --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- ikony dla elementów menu kontekstowego --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- znacznik zaznaczonego punktu menu --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- zakładka w liście odtwarzania --> </IMAGE> <!-- Ikony myszki w podpowiedziach --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Rysunek LPM --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Rysunek PPM --> </IMAGE> <!-- Rozpoznawanie cyfr naprzemiennie różnych kolorów u dołu bloku --> <FONT id="Digits" img="FT.Digits" chars="<0123456789: >"/> <!-- "<0123456789: >" --> <!-- //Koniec rozmieszczania podstawowych rysunków na fragmenty // ==================================== --> <!-- Początek opisywania zastosowania utworzonych wcześniej fragmentów rysunku ========================= --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Opisanie obramowania programu --> <!-- Rozmieszczamy przyciski nagłówka okna --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Tło nagłówka --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [o programie] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [zamknij] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Linia tekstowa nagłówka --> </CTLDEF> <!-- Rozmieszczamy przyciski Panelu sterowania --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Tło Panelu sterowania --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Odtwarzaj/Wstrzymaj] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Ustawienia] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} > {DUR}"/> <!-- Pozycja/Czas trwania --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Aktualny czas --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Regulator głośności --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Oś czasu --> </CTLDEF> <!-- Rozmieszczamy przyciski Listy odtwarzania --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- tło przycisków --> </CTLDEF> </SKIN>
W tej chwili możliwe jest już używanie skórki, ale nadal niewygodne jej udostępnianie. Teraz należy ją zoptymalizować i spakować.
Optymalizacja zamyka się w zmianie plików graficznych.
Jak wiadomo, format "bmp" zajmuje bardzo dużo miejsca ponieważ nie ma wbudowanych funkcji kompresji. Ale nie jest tak źle. Zamiast tego można pobawić się z głębią kolorów. Obrazek w formacie "bmp" obsługuje takie warianty głębi kolorów:
Aktualna ilość kolorów w obrazkach naszej skórki:
Jak widać, 2 obrazki można skompresować do 8-bitowej głębi kolorów, a jeden - nawet do 4-bitowej. Aby w nowym obrazku zachować niezbędne kolory, należy je przeindeksować. Jak to zostanie zrobione, zależy od edytora graficznego. Na przykład, w Photoshopie należy przejść do menu głównego \ Obraz \ Tryb \ Indeksowanie kolorów.... Po zmianie okazało się, że dla Rclick.bmp kompresja do 256-ciu kolorów jest wizualnie niezauważalna. Dlatego przeprowadzimy zmianę głębi kolorów dla wszystkich obrazków:
Plik | Stary rozmiar, KB | Nowa głębia kolorów | Nowy rozmiar, KB |
---|---|---|---|
logo.bmp | 85,1 | 8 bitów | 29,4 |
Color.bmp | 71,1 | 8 bitów | 23,8 |
Rclick.bmp | 12,3 | 8 bitów | 4,0 |
main.bmp | 91,9 | 4 bity | 15,7 |
RAZEM | 260,4 | - | 72,9 |
Jak się okazało, całkowita objętość danych została pomniejszona więcej niż trzy razy. Imponujące! Analogicznie należy postąpić z plikiem "preview.png". Jedyna różnica jest taka, że format "png" nie ma 4-bitowej głębi kolorów, a tylko pełną (16,8 mln. kolorów) lub 8-bitową (256 kolorów).
To całkiem proste: bierzemy wszystkie niezbędne pliki i archiwizujemy do formatu "zip". Poziom kompresji - dowolny, ale zalecany jest maksymalny. Najlepiej zostawić domyślne ustawienia kompresji, ponieważ Light Alloy nie rozumie nowoczesnych metod kompresji, tj. LZMA.
Wreszcie ostateczny szlif: w skórce należy zmienić rozszerzenie - z ".zip" na ".las".
W końcu, po jednym lub dwóch dniach pracy, skórka jest gotowa!